<template>
  <a-card :bordered="false" style="width: 600px; height: 50px">
    <a-row :gutter="32">
      <a-col :span="8">
        <a-button-group>
          <a-button
            :icon="isPlaying ? 'pause-circle' : 'play-circle'"
            @click="togglePlay"
            :disabled="!audioUrl"
          >
            {{ isPlaying ? "暂停" : "播放" }}
          </a-button>
          <a-button
            icon="stop"
            @click="stop"
            :disabled="!audioUrl || !isPlaying"
          >
            停止
          </a-button>
        </a-button-group>
      </a-col>
      <a-col :span="14">
        <a-slider
          :value="currentTime"
          :max="duration"
          :step="0.1"
          @change="seek"
          :tipFormatter="formatTime"
        />
        <div class="time-display">
          <span>{{ formatTime(currentTime) }}</span>
          <span>{{ formatTime(duration) }}</span>
        </div>
      </a-col>
    </a-row>

    <!-- 音量控制
    <div class="volume-control" v-if="audioUrl">
      <a-icon type="sound" />
      <a-slider
        :value="volume * 100"
        @change="changeVolume"
        :min="0"
        :max="100"
        style="width: 100px"
      />
    </div> -->

    <!-- 当前播放地址
    <div class="file-info" v-if="audioUrl">
      <a-icon type="link" />
      <a :href="audioUrl" target="_blank" style="margin-left: 8px">音频地址</a>
    </div> -->
  </a-card>
</template>

<script>
export default {
  props: {
    // 接收外部传入的音频URL
    audioUrl: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      audio: null,
      isPlaying: false,
      currentTime: 0,
      duration: 0,
      volume: 0.7, // 默认音量70%
    };
  },
  watch: {
    // 监听audioUrl变化
    audioUrl(newUrl) {
      this.initAudio(newUrl);
    },
  },
  mounted() {
    if (this.audioUrl) {
      this.initAudio(this.audioUrl);
    }
  },
  methods: {
    // 初始化音频
    initAudio(url) {
      // 清理之前的音频对象
      if (this.audio) {
        this.audio.pause();
        this.audio = null;
      }

      if (!url) return;

      this.audio = new Audio(url);
      this.audio.volume = this.volume;

      // 监听元数据加载
      this.audio.addEventListener("loadedmetadata", () => {
        this.duration = this.audio.duration;
      });

      // 监听时间更新
      this.audio.addEventListener("timeupdate", () => {
        this.currentTime = this.audio.currentTime;
      });

      // 监听播放结束
      this.audio.addEventListener("ended", () => {
        this.isPlaying = false;
      });
    },

    // 格式化时间为 MM:SS
    formatTime(seconds) {
      if (isNaN(seconds)) return "00:00";
      const mins = Math.floor(seconds / 60);
      const secs = Math.floor(seconds % 60);
      return `${mins.toString().padStart(2, "0")}:${secs
        .toString()
        .padStart(2, "0")}`;
    },

    // 播放/暂停切换
    togglePlay() {
      if (this.isPlaying) {
        this.audio.pause();
      } else {
        this.audio.play().catch((e) => {
          this.$message.error("播放失败: " + e.message);
        });
      }
      this.isPlaying = !this.isPlaying;
    },

    // 停止播放
    stop() {
      if (this.audio) {
        this.audio.pause();
        this.audio.currentTime = 0;
        this.isPlaying = false;
        this.currentTime = 0;
      }
    },

    // 跳转到指定位置
    seek(value) {
      if (this.audio) {
        this.audio.currentTime = value;
      }
    },

    // 调整音量
    changeVolume(value) {
      this.volume = value / 100;
      if (this.audio) {
        this.audio.volume = this.volume;
      }
    },
  },

  beforeDestroy() {
    if (this.audio) {
      this.audio.pause();
      this.audio = null;
    }
  },
};
</script>

<style scoped>
.control-container {
  display: flex;
  align-items: center;
  gap: 15px;
}
.audio-controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.progress-container {
  margin: 20px 0;
}

.time-display {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 12px;
  color: #888;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}

.file-info {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed #eee;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}
</style>
